<template>
<!--  <el-form :inline="true" :model="tranQuery" :rules="tranRules">

    <el-form-item label="客户姓名">
      <el-input v-model="tranQuery.fullName" placeholder="请输入姓名" clearable />
    </el-form-item>

    <el-form-item label="交易金额" prop="money">
      <el-input v-model="tranQuery.money" placeholder="请输入交易金额" clearable />
    </el-form-item>


    <el-form-item label="交易阶段">
      <el-select
          v-model="tranQuery.stage"
          placeholder="请选择交易阶段"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in tranStateOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="预计成交时间">
      <el-date-picker
          v-model="tranQuery.expectedDate"
          type="datetime"
          placeholder="请选择预计成交时间"
          value-format="YYYY-MM-DD HH:mm:ss"/>
    </el-form-item>

    <el-form-item label="创建时间">
      <el-date-picker
          v-model="tranQuery.createTime"
          type="datetime"
          placeholder="请选择创建时间"
          value-format="YYYY-MM-DD HH:mm:ss"/>
    </el-form-item>



    <el-form-item>
      <el-button type="primary" @click="onSearch">搜 索</el-button>
      <el-button type="primary" plain @click="onReset">重 置</el-button>
    </el-form-item>
  </el-form>



  <el-table
      :data="tranList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="50"/>
    <el-table-column type="index" label="序号" width="65"/>
    <el-table-column label="交易流水号">
      <template #default="scope">
        <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.tranNo }}</a>
      </template>
    </el-table-column>
    <el-table-column property="cluePO.fullName" label="客户姓名"/>
    <el-table-column property="cluePO.phone" label="客户手机"/>
    <el-table-column property="money" label="交易金额"/>
    <el-table-column property="expectedDate" label="预计成交时间"/>
&lt;!&ndash;    <el-table-column property="stageByPO.typeValue" label="交易阶段"/>&ndash;&gt;
    <el-table-column property="stageByPO.typeValue" label="交易阶段" >
      <template #default="scope" >
        <span style="background: lightgoldenrodyellow" v-if="scope.row.stage === 42">{{scope.row.stageByPO.typeValue}}</span>
        <span v-else>{{scope.row.stageByPO.typeValue}}</span>
      </template>
    </el-table-column>

&lt;!&ndash;    <el-table-column property="nextContactTime" label="下次跟踪时间"/>&ndash;&gt;
    <el-table-column property="createTime" label="创建时间"/>
    <el-table-column label="操作" width="90">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <p>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @prev-click="page"
        @next-click="page"
        @current-change="page"/>
  </p>-->


  <el-form :inline="true" :model="tranQuery" :rules="tranRules" class="form-inline">

    <el-form-item label="客户姓名">
      <el-input v-model="tranQuery.fullName" placeholder="请输入姓名" clearable />
    </el-form-item>

    <el-form-item label="交易金额" prop="money">
      <el-input v-model="tranQuery.money" placeholder="请输入交易金额" clearable />
    </el-form-item>

    <el-form-item label="交易阶段">
      <el-select
          v-model="tranQuery.stage"
          placeholder="请选择交易阶段"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in tranStateOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="预计成交时间">
      <el-date-picker
          v-model="tranQuery.expectedDate"
          type="datetime"
          placeholder="请选择预计成交时间"
          value-format="YYYY-MM-DD HH:mm:ss"/>
    </el-form-item>

    <el-form-item label="创建时间">
      <el-date-picker
          v-model="tranQuery.createTime"
          type="datetime"
          placeholder="请选择创建时间"
          value-format="YYYY-MM-DD HH:mm:ss"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSearch" round>搜 索</el-button>
      <el-button type="primary" plain round @click="onReset">重 置</el-button>
    </el-form-item>
  </el-form>

  <el-table
      :data="tranList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      stripe
      border>

    <el-table-column type="selection" width="50"/>
    <el-table-column type="index" label="序号" width="65"/>
    <el-table-column label="交易流水号">
      <template #default="scope">
        <a href="javascript:" @click="view(scope.row.id)" class="link-style">{{ scope.row.tranNo }}</a>
      </template>
    </el-table-column>
    <el-table-column property="cluePO.fullName" label="客户姓名"/>
    <el-table-column property="cluePO.phone" label="客户手机"/>
    <el-table-column property="money" label="交易金额"/>
    <el-table-column property="expectedDate" label="预计成交时间"/>
    <el-table-column property="stageByPO.typeValue" label="交易阶段" >
      <template #default="scope" >
        <span :style="{ backgroundColor: scope.row.stage === 42 ? 'lightgoldenrodyellow' : 'transparent' }">{{scope.row.stageByPO.typeValue}}</span>
      </template>
    </el-table-column>
    <el-table-column property="createTime" label="创建时间"/>
    <el-table-column label="操作" width="90">
      <template #default="scope">
        <el-button type="primary" size="small" @click="view(scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <p>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @prev-click="page"
        @next-click="page"
        @current-change="page"/>
  </p>

</template>

<script>
import {doGet} from "../http/httpRequest";

export default {
  name: "TranView",

  //注入
  inject : ['reload'],

  data() {
    return {
      tranList : [{
        cluePO : {},
        stageByPO : {},
      }],
      //分页时每页显示多少条数据
      pageSize : 0,
      //总共有多少条
      total : 0,
      //交易搜索表单对象，初始值是空
      tranQuery: {},
      //交易阶段的下拉选项
      tranStateOptions:[],
    }
  },

  //页面渲染后执行该函数钩子
  mounted() {
    this.getData(1);
    this.loadDicValue('stage');
  },

  methods : {
    //获取用户分页列表数据
    getData(current) {
      doGet("/api/trans", {
        current : current, //当前页，前面是参数名，后面是参数值
        //6个搜索条件参数
        fullName: this.tranQuery.fullName, //负责人id
        name: this.tranQuery.name, //活动名称
        stage: this.tranQuery.stage,//交易状态
        money: this.tranQuery.money, //活动预算
        expectedDate: this.tranQuery.expectedDate, //预计成交时间
        createTime: this.tranQuery.createTime, //创建时间
      }).then(resp => {
        if (resp.data.code === 200) {
          this.tranList = resp.data.data.list; // resp.data  =  R 对象
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      })
    },

    //分页函数
    page(number) { //number值是element-plus回调时传给我们的，number这个值就是当前页
      this.getData(number);
    },

    //查看交易详情
    view(id) {
      this.$router.push("/dashboard/tran/detail/" + id);
    },

    //加载字典数据
    loadDicValue(typeCode) {
      doGet("/api/dicvalue/" + typeCode, {}).then(resp => {
        if (resp.data.code === 200) {
          if (typeCode === 'stage') {
            this.tranStateOptions = resp.data.data;
          }
        }
      })
    },

    //搜索
    onSearch(){
      this.getData(1);
    },

    //搜索条件重重（清空）
    onReset(){
      this.tranQuery = {};
      //页面刷新
      this.reload();
    },


  }
}
</script>

<style scoped>
.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.link-style {
  color: #409EFF;
  text-decoration: underline;
  cursor: pointer;
}

.link-style:hover {
  color: #66b1ff;
}

</style>